// ---------------------获取文章列表数据---------------------

// 声明请求参数
let data = {
    pagenum: 1, //页码，默认1
    pagesize: 2, //自己约定，每页显示几条数据

}

// 定义函数，分页获取数据，并渲染到表格中
function renderArticle() {
    $.ajax({
        url: '/my/article/list',
        data: data,
        success: function(res) {
            console.log(res);
            if (res.status === 0) {
                let str = '';
                res.data.forEach(item => {
                    str += `
                <tr>
                        <td>${item.title}</td>
                        <td>${item.cate_name}</td>
                        <td>${item.pub_date}</td>
                        <td>${item.state}</td>
                        <td>
                        <a href="./edit.html?id=${item.id}" class="layui-btn layui-btn-xs">编辑</a>
                <button data-id="${item.id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
                        </td>
                    </tr>
                `;
                });
                $('tbody').html(str);
                // 等页面渲染刷新完毕，调用函数，创建分页
                showPage(res.total)
            }
        }
    })
}
renderArticle();

// ---------------------分页---------------------
function showPage(t) {
    let laypage = layui.laypage;
    // 执行一个laypage实例
    laypage.render({
        elem: 'page', // 注意，这里的test1是ID，不用加#
        count: t, // 数据总数，从服务端得到
        limit: data.pagesize, // 默认是10，每页显示几条
        limits: [5, 10, 20, 30, 40, 50],
        curr: data.pagenum, // 当前页
        layout: ['limit', 'prev', 'page', 'next', 'count', 'skip'], // 自定义排版,skip(跳转)
        jump: function(obj, first) {
            //首次不执行
            if (!first) {
                //do something
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数
                data.pagenum = obj.curr;
                data.pagesize = obj.limit; // 每页显示几条
                renderArticle();
            }

        }
    });
}

// ---------------------获取分类(处理下拉框)---------------------
$.ajax({
    url: '/my/category/list',
    success: function(res) {
        console.log(res);
        if (res.status === 0) {
            let str = '';
            res.data.forEach(item => {
                str += `<option value="${item.id}">${item.name}</option>`
            });
            $('#cate_id').append(str);
            // 动态创建的下拉框、单项按钮、复选按钮，需要更新渲染
            let form = layui.form;
            // form.render('select','表单的lay-filter属性的值');
            form.render('select');
        }
    }
})

// ---------------------筛选---------------------
$('#search').on('submit', function(e) {
    e.preventDefault();
    // 获取两个下拉框的值
    let cate_id = $('#cate_id').val();
    let state = $('#state').val();

    // 添加请求参数
    if (cate_id) {
        data.cate_id = cate_id;
    } else {
        delete data.cate_id; // delete 用于删除对象的属性
    }

    if (state) {
        data.state = state;
    } else {
        delete data.state;
    }
    // 重置pagenum,筛选之后，从第一页开始浏览数据
    data.pagenum = 1;


    // 发送请求，重新获取数据,重新渲染
    renderArticle();
})

// -------------------------- 删除 ------------------------------
$('tbody').on('click', 'button:contains("删除")', function() {
    let id = $(this).data('id');
    let that = $(this);
    layer.confirm('确定删除吗？', function(index) {

        // 使用dom的方式删除该行
        that.parents('tr').remove();

        $.ajax({
            // url: '/my/article/delete/2',
            url: '/my/article/delete/' + id,
            success: function(res) {

                if (res.status === 0) {
                    layer.msg(res.message);
                    if ($('tbody').children().length > 0) {
                        renderArticle();
                    } else {
                        data.pagenum--;
                        if (data.pagenum === 0) return;
                        renderArticle();
                    }
                }
            }
        });

        layer.close(index); // 关闭弹层
    });
})